<template>
    <view v-if="show" class="he-loading" :class="mode == 'circle' ? 'he-loading-circle' : 'he-loading-flower'"
          :style="[cricleStyle]">
    </view>
</template>

<script>
export default {
    name: "he-loading",
    props: {
        // 动画的类型
        mode: {
            type: String,
            default: 'circle'
        },
        // 动画的颜色
        color: {
            type: String,
            default: '#c7c7c7'
        },
        // 加载图标的大小，单位rpx
        size: {
            type: [String, Number],
            default: '34'
        },
        // 是否显示动画
        show: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        // 加载中圆圈动画的样式
        cricleStyle() {
            let style = {};
            style.width = this.size + 'rpx';
            style.height = this.size + 'rpx';
            if (this.mode == 'circle') style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${this.color ? this.color : '#c7c7c7'}`;
            return style;
        },
    }
}
</script>

<style scoped>

.he-loading-circle {
    /* #ifndef APP-NVUE */
    display: inline-flex;
    /* #endif */
    vertical-align: middle;
    width: 28px;
    height: 28px;
    background: 0 0;
    border-radius: 50%;
    border: 2px solid;
    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
    animation: he-circle 1s linear infinite;
}

.he-loading-flower {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    -webkit-animation: a 1s steps(12) infinite;
    animation: he-flower 1s steps(12) infinite;
    background: transparent url() no-repeat;
    background-size: 100%;
}

@keyframes he-flower {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@-webkit-keyframes he-circle {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>
